<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">Forms stuff</a></li>
        <li>Form validation</li>
    </ul>        
</div>

<div class="content">
            
    <div class="row-fluid">
        
        <div class="span8">                
            
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-bookmark1"></i></div>
                    <h2>Form validation</h2>
                </div>                                               
                <form id="validate" method="POST" action="javascript:notify('Validation','Form #validate submited');">
                <div class="block-fluid">

                    <div class="row-form">
                        <div class="span2">Login:</div>
                        <div class="span10">
                            <input type="text" class="validate[required,maxSize[8]]"/>
                            <span class="bottom">Required, max size = 8</span>
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span2">Password:</div>
                        <div class="span10">
                            <input type="password" class="validate[required,minSize[5],maxSize[10]]" id="password"/>
                            <span class="bottom">Required, min size = 5, max size = 10</span>
                        </div>
                    </div>                    
                    <div class="row-form">
                        <div class="span2">Confirm Password:</div>
                        <div class="span10">
                            <input type="password" class="validate[required,equals[password]]"/>
                            <span class="bottom">Required, equals Password</span>
                        </div>
                    </div>
                    <div class="row-form">

                    </div>                                        
                    <div class="row-form">
                        <div class="span2">Age:</div>
                        <div class="span5">
                            <input type="text" class="validate[required,custom[integer],min[18],max[120]]"/>
                            <span class="bottom">Required, integer, min value = 18, max = 120</span>
                        </div>                        
                        <div class="span2 TAR">Gender:</div>
                        <div class="span3">
                            <nobr><input type="radio" class="validate[required]" name="gender" value="1"/> Male</nobr> <nobr><input type="radio" class="validate[required]" name="gender" value="0"/> Famale</nobr>
                            <span class="bottom">Required</span>
                        </div>                        
                    </div>
                    <div class="row-form">
                        <div class="span2">Date of birth:</div>
                        <div class="span10">
                            <input type="text" class="validate[required,custom[date]]"/>
                            <span class="bottom">Required, date YYYY-MM-DD</span>
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span2">Credit card:</div>
                        <div class="span10">
                            <input type="text" class="validate[required,creditCard]"/>
                            <span class="bottom">Required, credit card number</span>
                        </div>
                    </div>             
                    <div class="row-form">
                        <div class="span2">Site:</div>
                        <div class="span10">
                            <input type="text" value="http://" class="validate[required,custom[url]]"/>
                            <span class="bottom">Required, url</span>
                        </div>
                    </div>                              
                    <div class="row-form">                        
                        <div class="span12">
                            <input type="checkbox" class="validate[required]" name="terms" value="1"/> Yes, I accept your terms and conditions.
                            <span class="bottom">Required</span>
                        </div>
                    </div>                    

                    <div class="toolbar bottom TAR">
                        <div class="btn-group">
                            <button class="btn btn-info" type="button" onClick="$('#validate').validationEngine('hide');">Hide prompts</button>
                            <button class="btn btn-primary" type="submit">Submit</button>
                        </div>
                    </div>

                </div>                
                </form>
            </div>
        </div>
        
        <div class="span4">
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-star3"></i></div>
                    <h2>Custom fields validation</h2>
                </div>                   
                <form id="validate_custom" method="POST" action="javascript:notify('Validation','Form #validate_custom submited');">
                <div class="block-fluid">

                    <div class="row-form">
                        <div class="span5">Select:</div>
                        <div class="span7">                            
                            <select name="s_example" class="validate[required]" style="width: 100%;">
                                <option value=""></option>
                                <option value="1">Andorra</option>
                                <option value="2">Antarctica</option>                                
                                <option value="3">Ukraine</option>                                                                       
                            </select>                            
                            <span class="bottom">Required</span>
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span5">Checkbox:</div>
                        <div class="span7">                            
                            <input type="checkbox" class="validate[required]" name="vcheck" value="1"/> Enabled <input  name="vcheck" value="0" type="checkbox" disabled="disabled" class="validate[required]"/> Disabled
                            <span class="bottom">Required</span>
                        </div>
                    </div>                    
                    <div class="row-form">
                        <div class="span5">Radio:</div>
                        <div class="span7">                            
                            <input type="radio" class="validate[required]" name="vradio" value="1"/> Enabled <input type="radio" disabled="disabled" class="validate[required]" name="vradio" value="0"/> Disabled
                            <span class="bottom">Required</span>
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span5">Datepicker:</div>
                        <div class="span7">                            
                            <input type="text" class="validate[required] datepicker"/>
                            <span class="bottom">Required</span>
                        </div>
                    </div>                                       

                    <div class="row-form"></div>

                    <div class="row-form">
                        <div class="span5">Group required:</div>
                        <div class="span7">                            
                            <input class="validate[groupRequired[payments]]" type="text" name="credit" id="credit" />
                            <span class="bottom">Any of group fields must be filled.</span>
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span5"></div>
                        <div class="span7">                            
                            <input class="validate[groupRequired[payments]]" type="text" name="paypal" id="paypal" />
                            <span class="bottom">Any of group fields must be filled.</span>
                        </div>
                    </div>

                    <div class="row-form"></div>

                    <div class="row-form">
                        <div class="span5">Condition required:</div>
                        <div class="span7">                            
                            <input type="text" name="creditcard" id="creditcard" placeholder="Credit card"/>                   
                        </div>
                    </div>
                    <div class="row-form">
                        <div class="span5"></div>
                        <div class="span7">                            
                            <input class="validate[condRequired[creditcard]]" type="text" id="ccv" name="ccv" placeholder="CCV"/>
                            <span class="bottom">This field is required if "Credit card" field is filled.</span>
                        </div>
                    </div>

                    <div class="toolbar bottom TAR">
                        <div class="btn-group">
                            <button class="btn btn-info" type="button" onClick="$('#validate_custom').validationEngine('hide');">Hide prompts</button>
                            <button class="btn btn-primary" type="submit">Submit</button>
                        </div>
                    </div>                    

                </div>
                </form>
            </div>
        </div>
        
    </div>                        
    
</div>  